1、每一个 .layui-step-content-item代表一个tab页面，高度默认最小值为满屏

4、canIconClick：上方步骤条是否可以点击，可省略，默认false

layui（谐音：类UI) 是一款采用自身模块规范编写的前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，下面我们来看一下基于layui的步骤条面板实现。

6、isOpenStepLevel：是否严格按照步骤条顺序执行，即未走过的步骤不可点，走过的可点，可省略，若开启则默认canIconClick字段关闭

外部可以使用的函数说明

2、title：步骤条下方文字说明，类型为数组，可省略，默认["第一步","第二步","第三步","。。。"]

5、prev()：跳到上一步

2、按扭区默认悬浮固定在右下角，可自行设置，内部的按钮个数可以自定义

1、elem：外层容器

html元素

更多layui知识请关注layui使用教程栏目。

以上就是基于layui的步骤条面板（附代码）的详细内容，更多请关注聚合云库其它相关文章！

1、render()：初始渲染界面

7、disabled(i)：禁用某一步

2、goStep(i)：跳到第几步

<div class="layui-step"> <div class="layui-step-content layui-clear"> <div class="layui-step-content-item">条目1</div> <div class="layui-step-content-item">条目2</div> <div class="layui-step-content-item">条目3</div> <div class="layui-step-content-item">条目4</div> </div> <div class="layui-step-btn"> <div class="layui-btn-group"> <button class="layui-btn goFirst">第一步</button> <button class="layui-btn prev">上一步</button> <button class="layui-btn next">下一步</button> <button class="layui-btn goLast">最后一步</button> <button class="layui-btn goStep">走到第二步</button> <button class="layui-btn disabled">禁用第三步</button> <button class="layui-btn abled">解禁第三步</button> </div> </div> </div>

js引用

1、currentStep：获取当前是第几步

3、currentStep：初始时是第几步，可省略，默认第一步

6、next()：跳到下一步

外部可使用的变量说明

3、goFirst()：跳到第1步

3、按钮禁用与解禁的位置（i）必须在当前步数之后，即禁用时，该位置应尚未走到

5、description：步骤条下方描述性文字，类型为数组，可省略

4、goLast()：跳到最后1步

layui.use(['jquery','step'], function(){ var $ = layui.jquery; var step = layui.step; step.render({ elem: '.layui-step', // title: ["第一步","第二步","第三步","第四步"], description: ["aaa","bbb","ccc","ddd"], currentStep: 1, // canIconClick: true, isOpenStepLevel: true }); $(".goFirst").on("click",function() { step.goFirst(); }) $(".prev").on("click",function() { step.prev(); }) $(".next").on("click",function() { step.next(); }) $(".goLast").on("click",function() { step.goLast(); }) $(".goStep").on("click",function() { step.goStep(2); }) $(".disabled").on("click",function() { step.disabled(3); }) $(".abled").on("click",function() { step.abled(3); }) });

说明

8、abled(i)：解除某一步的禁用

step.render()参数说明